<template>
    <div class="l-rblock" >
        <el-input
                ref="main"
                :placeholder="$t(placeholder)"
                v-model="selectValue"
                :size="size"
                :clearable="disabled?false:clearable"
                :disabled="disabled"
                @focus="handleShow">
            <span slot="append"
                    @click="handleShow">
                <el-button slot="append" icon="el-icon-document"></el-button>
            </span>
        </el-input>
        <l-dbtable-selectdialog 
            :visible.sync="dialogVisible"
            :dbCode="dbCode"
            :multiple="false"

            @select="dbSelect"
            >
        </l-dbtable-selectdialog>
    </div>
</template>
<script>
export default {
    name:'l-dbtable-select',
    props: {
        value:{},
        size:String,
        placeholder:{
            type:String,
            default:'请选择表单'
        },
        disabled:{
            type:Boolean,
            default:false
        },
        clearable:{
            type:Boolean,
            default:true
        },
        dbCode:String
    },
    data () {
        return {
            dialogVisible:false
        }
    },
    computed:{
        selectValue:{
            get(){
                return this.value;
            },
            set(val){
                this.$emit('input',val);
            }
        }
    },
    mounted () {
    },
    methods:{    
        handleChange(val){
            this.$emit('change',val);
        },
        handleShow(){
            if(this.dbCode){
                this.dialogVisible = true;
            }
            else{
                 this.$message({
                    message: '请选择数据库',
                    type: 'warning'
                });
            }
        },
        dbSelect(list){
            this.selectValue = list[0].name;
            this.handleChange(list[0])
        }
    }
}
</script>